React Suspense ローディング状態の構成：ネストされたローディング管理

React 16.6 で導入された React Suspense は、アプリケーションでローディング状態を処理するための宣言的な方法を提供します。依存関係 (データやコードなど) の準備ができるまで、コンポーネントのレンダリングを「中断」できます。基本的な使い方は比較的簡単ですが、Suspense をマスターするには、特にネストされたローディングシナリオを扱う場合に、ローディング状態を効果的に構成する方法を理解する必要があります。この記事では、スムーズで魅力的なユーザーエクスペリエンスを実現するための React Suspense とその高度な構成技術について、包括的なガイドを提供します。

React Suspense の基本を理解する

Suspense は、本質的に fallback prop を受け入れる React コンポーネントです。このフォールバックは、Suspense でラップされたコンポーネントが何かをロードするのを待機している間にレンダリングされます。最も一般的な使用例には、次のものが含まれます。

• React.lazy を使用したコード分割： 初期バンドルサイズを削減するために、コンポーネントを動的にインポートします。
• データフェッチング： コンポーネントが依存するコンポーネントをレンダリングする前に、API からのデータが解決されるのを待ちます。

React.lazy を使用したコード分割

React.lazy を使用すると、React コンポーネントをオンデマンドでロードできます。これは、多くのコンポーネントを持つ大規模なアプリケーションでは特に、アプリケーションの初期ロード時間を大幅に改善できます。基本的な例を次に示します。

            import React, { Suspense, lazy } from 'react';

const MyComponent = lazy(() => import('./MyComponent'));

function App() {
  return (
    <Suspense fallback={<p>Loading...</p>}>
      <MyComponent />
    </Suspense>
  );
}

export default App;

            

              
                Copy
              
            
          

この例では、MyComponent は必要になったときにのみロードされます。ロード中は、fallback (この場合は単純な「Loading...」メッセージ) が表示されます。

Suspense を使用したデータフェッチング

React.lazy は Suspense とすぐに連携して動作しますが、データフェッチングには少し異なるアプローチが必要です。Suspense は、fetch や axios などの標準的なデータフェッチングライブラリと直接統合されていません。代わりに、データの読み込みを待機中にコンポーネントを「中断」できるライブラリまたはパターンを使用する必要があります。一般的な解決策としては、swr や react-query などのデータフェッチングライブラリを使用するか、カスタムリソース管理戦略を実装することがあります。

カスタムリソース管理アプローチを使用した概念的な例を次に示します。

            // Resource.js
const createResource = (promise) => {
  let status = 'pending';
  let result;
  let suspender = promise.then(
    (r) => {
      status = 'success';
      result = r;
    },
    (e) => {
      status = 'error';
      result = e;
    }
  );

  return {
    read() {
      if (status === 'pending') {
        throw suspender;
      } else if (status === 'error') {
        throw result;
      }
      return result;
    },
  };
};

export default createResource;

// MyComponent.js
import React from 'react';
import createResource from './Resource';

const fetchData = () =>
  new Promise((resolve) =>
    setTimeout(() => resolve({ data: 'Fetched Data!' }), 2000)
  );

const resource = createResource(fetchData());

function MyComponent() {
  const data = resource.read();
  return <p>{data.data}</p>;
}

export default MyComponent;

// App.js
import React, { Suspense } from 'react';
import MyComponent from './MyComponent';

function App() {
  return (
    <Suspense fallback={<p>Loading data...</p>}>
      <MyComponent />
    </Suspense>
  );
}

export default App;

            

              
                Copy
              
            
          

説明：

• createResource：この関数は Promise を受け取り、read メソッドを持つオブジェクトを返します。
• read：このメソッドは、Promise のステータスを確認します。保留中の場合は、Promise をスローし、コンポーネントを中断します。解決済みの場合は、データを返します。拒否された場合は、エラーをスローします。
• MyComponent：このコンポーネントは、resource.read() メソッドを使用してデータにアクセスします。データが準備できていない場合、コンポーネントは中断します。
• App：MyComponent を Suspense でラップし、データの読み込み中にフォールバック UI を提供します。

ローディング状態の構成：ネストされた Suspense の力

Suspense の真の力は、その構成能力にあります。 Suspense コンポーネントをネストして、よりきめ細かく洗練されたローディングエクスペリエンスを作成できます。これは、複数の非同期依存関係を持つコンポーネントを扱う場合や、UI の特定の部分の読み込みを優先させたい場合に特に役立ちます。

基本的なネストされた Suspense

ヘッダー、メインコンテンツ領域、サイドバーがあるページを想像してみましょう。これらの各コンポーネントには、独自の非同期依存関係がある場合があります。ネストされた Suspense コンポーネントを使用して、各セクションに個別のローディング状態を表示できます。

            import React, { Suspense, lazy } from 'react';

const Header = lazy(() => import('./Header'));
const MainContent = lazy(() => import('./MainContent'));
const Sidebar = lazy(() => import('./Sidebar'));

function App() {
  return (
    <div>
      <Suspense fallback={<p>Loading header...</p>}>
        <Header />
      </Suspense>
      <div style={{ display: 'flex' }}>
        <Suspense fallback={<p>Loading main content...</p>}>
          <MainContent />
        </Suspense>
        <Suspense fallback={<p>Loading sidebar...</p>}>
          <Sidebar />
        </Suspense>
      </div>
    </div>
  );
}

export default App;

            

              
                Copy
              
            
          

この例では、各コンポーネント (Header、MainContent、および Sidebar) が独自の Suspense 境界でラップされています。これは、Header がまだロード中の場合、「Loading header...」メッセージが表示され、MainContent と Sidebar は個別にロードできることを意味します。これにより、より応答性が高く、情報量の多いユーザーエクスペリエンスが可能になります。

ローディング状態の優先順位付け

場合によっては、UI の特定の部分の読み込みを優先させたい場合があります。たとえば、メインコンテンツの前にヘッダーとナビゲーションがロードされるようにしたい場合があります。これは、Suspense コンポーネントを戦略的にネストすることで実現できます。

            import React, { Suspense, lazy } from 'react';

const Header = lazy(() => import('./Header'));
const MainContent = lazy(() => import('./MainContent'));

function App() {
  return (
    <Suspense fallback={<p>Loading header and content...</p>}>
      <Header />
      <Suspense fallback={<p>Loading main content...</p>}>
        <MainContent />
      </Suspense>
    </Suspense>
  );
}

export default App;

            

              
                Copy
              
            
          

この例では、Header と MainContent はどちらも単一の外部 Suspense 境界でラップされています。これは、「Loading header and content...」メッセージは、Header と MainContent の両方がロードされるまで表示されることを意味します。MainContent の内部 Suspense は、Header が既にロードされている場合にのみトリガーされ、コンテンツ領域でよりきめ細かいローディングエクスペリエンスを提供します。

高度なネストされたローディング管理

基本的なネストを超えて、複雑なアプリケーションでローディング状態を管理するためのより高度なテクニックを使用できます。これらには以下が含まれます。

• カスタムフォールバックコンポーネント： より視覚的に魅力的で、情報量の多いローディングインジケーターを使用する。
• エラー境界によるエラー処理： ローディング中に発生したエラーを適切に処理する。
• Debouncing と Throttling： コンポーネントがデータをロードしようとする回数を最適化する。
• Suspense と Transitions の組み合わせ： ローディング状態とロード済みの状態の間をスムーズに遷移させる。

カスタムフォールバックコンポーネント

単純なテキストメッセージをフォールバックとして使用する代わりに、より優れたユーザーエクスペリエンスを提供するカスタムフォールバックコンポーネントを作成できます。これらのコンポーネントには以下が含まれます。

• スピナー： アニメーション化されたローディングインジケーター。
• スケルトン： 実際のコンテンツの構造を模倣したプレースホルダー UI 要素。
• プログレスバー： ローディングの進捗状況を示す視覚的なインジケーター。

フォールバックとしてスケルトンコンポーネントを使用する例を次に示します。

            import React from 'react';
import Skeleton from 'react-loading-skeleton'; // You'll need to install this library

function LoadingSkeleton() {
  return (
    <div>
      <Skeleton count={3} />
    </div>
  );
}

export default LoadingSkeleton;

// Usage in App.js
import React, { Suspense, lazy } from 'react';
import LoadingSkeleton from './LoadingSkeleton';

const MyComponent = lazy(() => import('./MyComponent'));

function App() {
  return (
    <Suspense fallback={<LoadingSkeleton />}>
      <MyComponent />
    </Suspense>
  );
}

export default App;

            

              
                Copy
              
            
          

この例では、react-loading-skeleton ライブラリを使用して、MyComponent がロードされている間に一連のスケルトンプレースホルダーを表示します。

エラー境界によるエラー処理

ローディングプロセス中に発生する可能性のあるエラーを処理することも重要です。React は、その子コンポーネントツリー内のどこでも JavaScript エラーをキャッチし、それらのエラーをログに記録し、フォールバック UI を表示するコンポーネントであるエラー境界を提供します。エラー境界は Suspense と連携して、堅牢なエラー処理メカニズムを提供します。

            import React, { Component } from 'react';

class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // You can also log the error to an error reporting service
    console.error(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children;
  }
}

export default ErrorBoundary;

// Usage in App.js
import React, { Suspense, lazy } from 'react';
import ErrorBoundary from './ErrorBoundary';

const MyComponent = lazy(() => import('./MyComponent'));

function App() {
  return (
    <ErrorBoundary>
      <Suspense fallback={<p>Loading...</p>}>
        <MyComponent />
      </Suspense>
    </ErrorBoundary>
  );
}

export default App;

            

              
                Copy
              
            
          

この例では、ErrorBoundary コンポーネントが Suspense コンポーネントをラップしています。 MyComponent の読み込み中にエラーが発生した場合、ErrorBoundary はエラーをキャッチし、「Something went wrong.」メッセージを表示します。

Debouncing と Throttling

場合によっては、コンポーネントがデータをロードしようとする回数を制限したい場合があります。これは、データフェッチングプロセスが高コストである場合や、過剰な API 呼び出しを防ぎたい場合に役立ちます。 Debouncing と throttling は、これを実現するのに役立つ 2 つのテクニックです。

Debouncing： 関数が最後に呼び出されてから一定の時間が経過するまで、関数の実行を遅らせます。

Throttling： 関数の実行速度を制限します。

これらのテクニックは、多くの場合、ユーザー入力イベントに適用されますが、Suspense 境界内でデータフェッチングを制御するためにも使用できます。実装は、使用している特定のデータフェッチングライブラリまたはリソース管理戦略によって異なります。

Suspense と Transitions の組み合わせ

React Transitions API (React 18 で導入) を使用すると、ローディング状態やロード済みの状態など、アプリケーション内のさまざまな状態間のよりスムーズなトランジションを作成できます。 useTransition を使用して、状態更新がトランジションであることを React に通知すると、ギクシャクした UI 更新を防ぐのに役立ちます。

            import React, { Suspense, lazy, useState, useTransition } from 'react';

const MyComponent = lazy(() => import('./MyComponent'));

function App() {
  const [isPending, startTransition] = useTransition();
  const [showComponent, setShowComponent] = useState(false);

  const handleClick = () => {
    startTransition(() => {
      setShowComponent(true);
    });
  };

  return (
    <div>
      <button onClick={handleClick} disabled={isPending}>
        {isPending ? 'Loading...' : 'Load Component'}
      </button>
      {showComponent && (
        <Suspense fallback={<p>Loading component...</p>}>
          <MyComponent />
        </Suspense>
      )}
    </div>
  );
}

export default App;

            

              
                Copy
              
            
          

この例では、「Load Component」ボタンをクリックすると、トランジションがトリガーされます。 React は、UI の応答性を維持しながら、MyComponent の読み込みを優先します。 isPending 状態は、トランジションが進行中かどうかを示し、ボタンを無効にして、ユーザーに視覚的なフィードバックを提供できます。

実際の例とシナリオ

ネストされた Suspense の実際的なアプリケーションをさらに説明するために、いくつかの現実のシナリオを検討してみましょう。

• e コマース製品ページ： 製品ページには、製品の詳細、レビュー、関連製品など、複数のセクションがある場合があります。各セクションは、ネストされた Suspense 境界を使用して個別にロードできます。製品の詳細の読み込みを優先して、ユーザーが最も重要な情報をできるだけ早く確認できるようにすることができます。
• ソーシャルメディアフィード： ソーシャルメディアフィードは、投稿、コメント、ユーザープロファイルで構成される場合があります。これらの各コンポーネントには、独自の非同期依存関係がある場合があります。ネストされた Suspense を使用すると、データがロードされている間に、各セクションのプレースホルダー UI を表示できます。また、ユーザー自身の投稿の読み込みを優先して、パーソナライズされたエクスペリエンスを提供することもできます。
• ダッシュボードアプリケーション： ダッシュボードには、さまざまなソースからのデータを表示する複数のウィジェットが含まれる場合があります。ネストされた Suspense を使用して、各ウィジェットを個別にロードできます。これにより、ユーザーは他のウィジェットがまだロードされている間に、利用可能なウィジェットを確認でき、より応答性が高く、インタラクティブなエクスペリエンスが実現します。

例：e コマース製品ページ

e コマース製品ページでネストされた Suspense を実装する方法を分解してみましょう。

            import React, { Suspense, lazy } from 'react';

const ProductDetails = lazy(() => import('./ProductDetails'));
const ProductReviews = lazy(() => import('./ProductReviews'));
const RelatedProducts = lazy(() => import('./RelatedProducts'));

function ProductPage() {
  return (
    <div>
      <Suspense fallback={<p>Loading product details...</p>}>
        <ProductDetails />
      </Suspense>

      <div style={{ marginTop: '20px' }}>
        <Suspense fallback={<p>Loading product reviews...</p>}>
          <ProductReviews />
        </Suspense>
      </div>

      <div style={{ marginTop: '20px' }}>
        <Suspense fallback={<p>Loading related products...</p>}>
          <RelatedProducts />
        </Suspense>
      </div>
    </div>
  );
}

export default ProductPage;

            

              
                Copy
              
            
          

この例では、製品ページの各セクション (製品の詳細、レビュー、関連製品) が独自の Suspense 境界でラップされています。これにより、各セクションを個別にロードでき、より応答性の高いユーザーエクスペリエンスを提供できます。また、各セクションのフォールバックとしてカスタムスケルトンコンポーネントを使用して、より視覚的に魅力的なローディングインジケーターを提供することも検討してください。

ベストプラクティスと考慮事項

React Suspense とネストされたローディング管理を使用する場合は、次のベストプラクティスを念頭に置くことが重要です。

• Suspense 境界を小さく保つ： Suspense 境界を小さくすることで、よりきめ細かいローディング制御とより優れたユーザーエクスペリエンスが可能になります。アプリケーションの大きなセクションを単一の Suspense 境界でラップすることは避けてください。
• カスタムフォールバックコンポーネントを使用する： 単純なテキストメッセージを、スケルトン、スピナー、またはプログレスバーなどの視覚的に魅力的で情報量の多いローディングインジケーターに置き換えます。
• エラーを適切に処理する： エラー境界を使用して、ローディングプロセス中に発生したエラーをキャッチし、ユーザーフレンドリーなエラーメッセージを表示します。
• データフェッチングを最適化する： swr や react-query などのデータフェッチングライブラリを使用して、データフェッチングとキャッシュを簡素化します。
• パフォーマンスを考慮する： Suspense コンポーネントの過剰なネストは、パフォーマンスに影響を与える可能性があるため、避けてください。 debouncing と throttling を使用して、コンポーネントがデータをロードしようとする回数を制限します。
• ローディング状態をテストする： さまざまなネットワーク条件下で、ローディング状態が優れたユーザーエクスペリエンスを提供していることを確認するために、ローディング状態を徹底的にテストします。

結論

React Suspense は、アプリケーションでローディング状態を処理するための強力で宣言的な方法を提供します。ネストされた Suspense などを使用して、ローディング状態を効果的に構成する方法を理解することで、より魅力的で応答性の高いユーザーエクスペリエンスを作成できます。この記事で概説されているベストプラクティスに従うことで、React Suspense をマスターし、非同期依存関係を適切に処理する堅牢で高性能なアプリケーションを構築できます。

ユーザーエクスペリエンスを優先し、情報量の多いローディングインジケーターを提供し、エラーを適切に処理することを忘れないでください。慎重な計画と実装により、React Suspense はフロントエンド開発のツールキットで貴重なツールになる可能性があります。

これらのテクニックを採用することで、場所やネットワーク条件に関係なく、世界中のユーザーにスムーズで楽しいエクスペリエンスをアプリケーションで確実に提供できます。